<template>
    <div>
        <h1>康复理疗显示</h1>
        项目名称 <input type="text" v-model="stt.name">
        <button class="btn btn-success" @click="chaxun">查询</button>

        <button class="btn btn-info" @click="qiyong(true)">批量启用</button>
        <button class="btn btn-danger" @click="jinyon(false)">批量禁用</button>

        <button class="btn btn-success" @click="daochu">导出</button>

        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>
                        <input type="checkbox" v-model="checked" @click="checkAll">
                    </td>
                    <td>序号</td>
                    <td>项目名称</td>
                    <td>项目编码</td>
                    <td>佣金</td>
                    <td>服务人数</td>
                    <td>服务时长</td>
                    <td>项目说明</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in info.list" :key="item.Id">
                    <td>
                        <input type="checkbox" v-model="ids" :value="item.Id" @change="checkop">
                    </td>
                    <td>{{item.Id}}</td>
                    <td>{{item.Mingcheng}}</td>
                    <td>{{item.Bianma}}</td>
                    <td>{{item.Yongjin}}</td>
                    <td>{{item.Renshu}}</td>
                    <td>{{item.Shichang}}</td>
                    <td>{{item.Shuoming}}</td>
                    <td>{{item.Zhuangtai==true?'启用':'禁用'}}</td>
                    <td>
                        <button class="btn btn-danger" @click="dele(item.Id)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>

    </div>
    <span>共{{info.totocount}}条</span>
    <span>每页{{stt.PageSize}}条</span>
    <span>第{{stt.PagenIndex}}/{{info.totolpco}}页</span>

    <button class="btn btn-info" @click="fenye(1)">首页</button>
    <button class="btn btn-info" @click="fenye(stt.PagenIndex-1)">上一页</button>
    <span class="btn btn-link" v-for="item in info.totolpco" @click="fenye(item)">{{item}}</span>
    <button class="btn btn-info" @click="fenye(stt.PagenIndex+1)">下一页</button>
    <button class="btn btn-info" @click="fenye(info.totolpco)">尾页</button>
    <input type="number" v-model="stt.PagenIndex">
    <button class="btn btn-info" @click="fenye(stt.PagenIndex)">跳转</button>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted } from 'vue';
import axios from 'axios';
import { useRouter,useRoute } from 'vue-router';
import moment from 'moment';

const router=useRouter();
const route=useRoute();

let checked:any=ref(false)
let ids:any=ref([])

let stt:any=reactive({
    name:'',
    PagenIndex:1,
    PageSize:3
})

let info:any=reactive({
    list:[],
    totocount:0,
    totolpco:0
})


onMounted(()=>{
    Xianshi()

})

//导出
const daochu=()=>{
    location.href=`http://localhost:5062/api/House/Daochu?name=${stt.name}&PagenIndex=${stt.PagenIndex}&PageSize=${stt.PageSize}`
}

//批量禁用
const jinyon=(stst:any)=>{
    console.log(stst);
    if(ids.value.length==0){
        alert('必须选中一项')
        return;
    }

    axios({
        url:'/api/House/Piliang',
        method:'get',
        params:{
            id:ids.value.toString(),
            stst:stst
        }
    }).then(res=>{
        console.log(res);
        if(res.data>0){
            alert('批量禁用成功')

            Xianshi()
            checked.value=false
            ids.value=[]
            return;
        }
        
    }).catch(err=>{
        console.log(err);
        
    })
    

}

//批量启用
const qiyong=(stst:any)=>{
    console.log(stst);
    if(ids.value.length==0){
        alert('必须选中一项')
        return;
    }

    axios({
        url:'/api/House/Piliang',
        method:'get',
        params:{
            id:ids.value.toString(),
            stst:stst
        }
    }).then(res=>{
        console.log(res);
        if(res.data>0){
            alert('批量启用成功')
            Xianshi()
            checked.value=false
            ids.value=[]
            return;
        }
        
    }).catch(err=>{
        console.log(err);
        
    })
    

}


//反选
const checkop=()=>{
    console.log(ids.value);
    if(ids.value.length==info.list.length){
        checked.value=true
    }else{
        checked.value=false
    }
    
}


//全选/全不选
const checkAll=()=>{
    checked.value=!checked.value
    if(checked.value==true){
        ids.value=info.list.map((item:any)=>{
            return item.Id
        })
    }else{
        ids.value=[]
    }
    console.log(checked.value);
    
}

//单删
const dele=(id:any)=>{
    console.log(id);
    if(confirm("确定删除吗")){
        axios({
            url:'/api/House/Empdele',
            method:'delete',
            params:{
                id:id
            }
        }).then(res=>{
            console.log(res);
            if(res.data>0){
                alert('删除成功')
                Xianshi();
                return;
            }
            
        }).catch(err=>{
            console.log(err);
            
        })
    }
    
}

//查询特殊处理
const chaxun=()=>{
    stt.PagenIndex=1;
    Xianshi()
}


//分页
const fenye=(num:any)=>{
    console.log(info.totolpco);
    if(num<1){
        num=stt.PagenIndex
        return;
    }

    if(num>info.totolpco){
        num=info.totolpco
        return;
    }


    stt.PagenIndex=num
    Xianshi()

    
}



//获取康复理疗数据
const Xianshi=()=>{
    console.log(info);
    axios({
        url:'/api/House/EmpList',
        method:'get',
        params:stt
    }).then(res=>{
        console.log(res);
        Object.assign(info,res.data)
        checked.value=false
        ids.value=[]
        
    }).catch(err=>{
        console.log(err);
        
    })

    
}




</script>

<style scoped>
button{
    margin: 0 5px;
}
span{
    margin: 0 5px;
}
</style>